<script setup lang="ts">
import { computed } from 'vue';

interface Props {
    theme?: String,
    size?: String,
    level?: String,
    disabled?: Boolean,
    loading?:Boolean,
}

const { theme, size, level, disabled,loading } = withDefaults(defineProps<Props>(), {
    theme: 'default',
    size: 'normal',
    level: 'normal',
    disabled: false,
    loading:false
})

const classes = computed(() => {
    return {
        [`wui-theme-${theme}`]: theme,
        [`wui-size-${size}`]: size,
        [`wui-level-${level}`]: level,
    }
})
</script>

<template>
    <button class="wui-button" :class="classes" :disabled="disabled">
        <span v-if="loading" class="wui-loadingIndicator"></span>
        <slot></slot>
    </button>
</template>

<style lang="scss">
$h:32px;
$border-color:#d9d9d9;
$color:#333;
$blue:rgb(25, 137, 250);
$radius:4px;
$red:red;
$gray:grey;

.wui-button {
    box-sizing: border-box;
    height: $h;
    padding: 0 12px;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    background-color: white;
    color: $color;
    border: 1px solid $border-color;
    border-radius: $radius;
    box-shadow: 0 1px 0 fade-out(black, 0.95);
    transition: background 0.25s;

    &+& {
        margin-left: 8px;
    }

    &:hover,
    &:focus {
        color: $blue;
        border-color: $blue;
    }

    &:focus {
        outline: none;
    }

    &::-moz-focus-inner {
        border: 0;
    }

    &.wui-theme-link {
        border-color: transparent;
        box-shadow: none;
        color: $blue;

        &:hover,
        &:focus {
            color: lighten($blue, 10%);
        }
    }

    &.wui-theme-text {
        border-color: transparent;
        box-shadow: none;
        color: inherit;

        &:hover,
        &:focus {
            background: darken(white, 5%);
        }
    }

    &.wui-size-big {
        font-size: 24px;
        height: 48px;
        padding: 0 16px;
    }

    &.wui-size-small {
        font-size: 12px;
        height: 20px;
        padding: 0 4px;
    }

    &.wui-theme-default {
        &.wui-level-main {
            background: $blue;
            color: white;
            border-color: $blue;

            &:hover,
            &:focus {
                background: darken($blue, 10%);
                border-color: darken($blue, 10%);
            }
        }

        &.wui-level-danger {
            background: $red;
            border-color: $red;
            color: white;

            &:hover,
            &:focus {
                background: darken($red, 10%);
                border-color: darken($red, 10%);
            }
        }
    }

    &.wui-theme-link {
        &.wui-level-danger {
            color: $red;

            &:hover,
            &:focus {
                color: darken($red, 10%);
            }
        }
    }

    &.wui-theme-text {
        &.wui-level-main {
            color: $blue;

            &:hover,
            &:focus {
                color: darken($blue, 10%);
            }
        }

        &.wui-level-danger {
            color: $red;

            &:hover,
            &:focus {
                color: darken($red, 10%);
            }
        }
    }

    &.wui-theme-default{
        &[disabled]{
            cursor: not-allowed;
            color: $gray;
            &:hover{
                border-color: $gray;
            }
        }
    }
    &.wui-theme-link, &.wui-theme-text {
    &[disabled] {
      cursor: not-allowed;
      color: $gray;
    }
  }
  > .wui-loadingIndicator{
      width: 14px;
      height: 14px;
      display: inline-block;
      margin-right: 4px;
      border-radius: 8px;
      border-color: $blue $blue $blue transparent;
      border-style: solid;
      border-width: 2px;
      animation: wui-spin 1s infinite linear;
  }
}
@keyframes wui-spin{
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
</style>